<template>
<div class="header">
  <div class="header-left">
	  <div class="iconfont back-icon">&#xe658;</div>
  </div>
  <div class="header-input">
	  <span class="iconfont">&#xe63c;</span>
  </div>
  <!-- 页面跳转 -->
  <router-link to='/city'>
  <div class="header-right">{{this.city}}
	<span class="iconfont arrow-icon">&#xe65c;</span>
  </div>
  </router-link>
 </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: 'HomeHeader',
  //mapstate是指把vuex中的数据映射到这个组件computed的计算属性里，下面是指把city的公用数据映射到名字为city的计算属性之中
  computed:{
	  ...mapState(['city']),
  }
}
</script>
<style lang='stylus' scoped>
	@import '~@/assets/styles/varibles.styl'
	.header
		display: flex
		line-height: .86rem
		background:$bgcolor
		color:#fff
	 .header-left
		width:.64rem
		float:left
	  .back-icon
	    text-align:center
		font-size: 1rem
	  .header-input
		flex: 1
		height: .64rem
		line-height: .64rem
		margin-top: .12rem
		margin-left: .2rem
		padding-left: .2rem
		background-color:#fff
		border-radius: .1rem
		color:#ccc
	  .header-right
		min-width: 1.04rem
		padding: 0 .1rem
		float:right
		text-align center
	   .arrow-icon
		font-size: 0.42rem
</style>
